<template>
    <div>
        <el-dialog
            title="修改运营账号"
            :visible.sync="dialogVisible"
            width="580px">
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="运营方名称:" prop="tenantId">
                    <el-select v-model="form.tenantId" :disabled="true" placeholder="请选择" style="width: 343px;">
                        <el-option
                            v-for="item in nameList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名:" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" :disabled="true"
                              style="width: 343px;"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password"
                              :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 30, message: '长度在 6 到 30  个字符', trigger: 'blur' }]">
                    <el-input v-model="form.password" show-password placeholder="请输入密码"
                              style="width: 343px;"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名:" prop="realname">
                    <el-input v-model="form.realname" placeholder="请输入真实姓名" style="width: 343px;"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入昵称" style="width: 343px;"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" style="width: 343px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {tenantList} from "@/admin/api/admin/operator/operator"
import {upDateUser} from "@/admin/api/admin/backStage/account/account"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                tenantId: null,
                username: "",
                password: "",
                realname: "",
                nickname: "",
                email: "",
            },
            nameList: [],
            updateId: 0
        }
    },
    mounted() {
        this.getData()
    },
    components: {},
    methods: {
        cancel() {
            this.dialogVisible = false;
        },
        showDialog(e, row) {
            this.form = row
            this.updateId = row.id
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    upDateUser(this.form, this.updateId).then(res => {
                        if (res.code == 200) {
                            this.dialogVisible = false;
                            this.$message({
                                message: res.message,
                                type: "success",
                            });
                            this.$parent.getOperatorList();
                        } else {
                            this.$message({
                                message: res.message,
                                type:"error",
                            })
                        }
                    })
                }else{
                    this.$message.warning('请输入正确的信息')
                }
            })
        },
        getData() {
            tenantList().then(res => {
                if (res.code == 200) {
                    this.nameList = res.data.items
                }

            })
        }
    }
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
